import {BrowserRouter, Routes, Route, useNavigate, usenav, Outlet, Link, NavLink, useParams, useLocation} from"react-router-dom"
import useTable from "../../../framework/common/lifecycle/useTable"
import request from "../../../framework/common/utils/request";
import {getQuery} from "../../../framework/common/utils"
import { Modal, Select, Form, Input, Table, Tag, Button, message } from "antd";
import eventBus, { useSubscribe } from "../../../framework/common/eventBus";
import { useState } from "react";
import "./tenantDetail.css";
const { Option } = Select;

export default function TenantDetail (){

  let urlParams = getQuery();//url上的参数

  //生成table组件
  const [form] = Form.useForm();
  const { tableProps, search } = useTable(
    (
      {
        current = 1, // 设定初始在第1页
        // pageSize, // 初始每页默认10条数据
        // sorter,
      },
      formData
    ) => {
      return request({
        url: "/platform/tenant-manager/tenant-application-list?tenantCode="+urlParams.tenantCode,
        method: "get",
        // data: {
        //   pageIndex: current,
        //   pageSize: pageSize,
        //   tenantCode: urlParams.tenantCode
        // },
      }).then(function (response) {
        if(response?.code === 1){
          let list = response?.data || [];
          list.forEach((item, index) => {
            item.index = index + 1 + (current - 1) * 10;//设置序号
          });
          return {
            total: response.data.total,
            list: list,
          };
        }
      });
    },
    {
      form,
      defaultPageSize: 10
    }
  );
  const { submit } = search;

  //生成table列信息
  let columns = [
        {
            title: "序号",
            dataIndex: "index",
            width: 70,
            align:"center"
        },
        {
            title: "应用名称",
            dataIndex: "name"
        },
        {
            title: "应用编码",
            dataIndex: "code",
        },
        {
            title: "版本号",
            dataIndex: "app_version",
        },
        {
            title: "应用类型",
            dataIndex: "app_type",
        },
        {
            title: "新增时间",
            dataIndex: "create_on",
        }
  ];

  //设置输入框placeholder
  return <>
    <TenantInfo des="租户信息"></TenantInfo>
    <div className="bg-white">
      <div className="overflow-hidden pb-2 pt-3 px-3 leading-8">
          <span className="text-base">应用列表</span>
      </div>
      <Table
        className="table-content-full table-content-tenant-detail"
        columns={columns}
        scroll={{ y: 2000 }} 
        rowKey={"code"}
        {...tableProps}
        pagination={false}
      />
    </div>
  </>
}

//租户信息
function TenantInfo({

}){

  let location = useLocation();
  const {
    TenantCode,
    TenantName,
    version,
    CreateOn,
  } = location.state;

  return <div className="bg-white mb-3 p-3">
    
    <div className="mb-3 overflow-auto">
      <span className="float-left leading-10 h-10 mr-3">
        <i className="iconfont icon-shenpidan text-[40px] text-color-1990ff"></i>
      </span>
      <div className="overflow-hidden">
        <p className=" text-color-999">租户号</p>
        <p>{TenantCode}</p>
      </div>
    </div>

    <div className="overflow-auto">
      <div className="float-left mr-16">
        <p className=" text-color-999">客户名称</p>
        <p>{TenantName}</p>
      </div>
      {
        false 
        && <div className="float-left mr-16">
          <p className=" text-color-999">BMP版本号</p>
          <p>{version}</p>
        </div>
      }
      <div className="float-left">
        <p className=" text-color-999">开户时间</p>
        <p>{CreateOn || "-"}</p>
      </div>
    </div>

  </div>
}